<template>
  <div class="mine">
    <!-- <my-head title="个人中心" :back="false"></my-head> -->

<div data-v-5a4c1cff="" class="top" >
    <div data-v-5a4c1cff="">
        <img data-v-5a4c1cff="" src="https://shp.qlogo.cn/daoju/9999/9999_1/0" alt="">
        <span class="nick-name"  v-if="userInfo">{{userInfo.username}}</span>
         <span class="nick-name" v-else @click="gotoWhere({ name: 'login' })">立即登录</span>
        </div>
        <i data-v-5a4c1cff="" class="van-icon van-icon-arrow" style="color: rgb(153, 153, 153); font-size: 14px;"><!----></i>
        </div>






    <!-- <div class="mine-top">
      <img
        :src="require('@/assets/images/Pikachu.jpg')"
        alt=""
        class="avatar-icon"
      />
      <h2 class="nick-name" v-if="userInfo">
        {{ userInfo.username }} / {{ userInfo.phone }}
      </h2>
      <h2 class="nick-name" v-else @click="gotoWhere({ name: 'login' })">
        立即登录
      </h2>
    </div> -->

  <!-- <section data-v-01e0533d="" class="cen-order"><a data-v-01e0533d="" href="" class="order-hd"><h4 data-v-01e0533d="">我的订单</h4> <p data-v-01e0533d="" class="order-all">全部订单</p></a> <ul data-v-01e0533d="" class="order-list"><li data-v-01e0533d=""><a data-v-01e0533d="" href="/order?newstatus=2" class="list-link" title="待付款"><div data-v-01e0533d="" class="tab-cell"> <i data-v-01e0533d="" class="ico-mall cen-pay"></i> <h5 data-v-01e0533d="">待付款</h5></div></a></li> <li data-v-01e0533d=""><a data-v-01e0533d="" href="/order?newstatus=3" class="list-link" title="待发货"><div data-v-01e0533d="" class="tab-cell"> <i data-v-01e0533d="" class="ico-mall cen-pend"></i> <h5 data-v-01e0533d="">待发货</h5></div></a></li> <li data-v-01e0533d=""><a data-v-01e0533d="" href="/order?newstatus=4" class="list-link" title="待收货"><div data-v-01e0533d="" class="tab-cell"> <i data-v-01e0533d="" class="ico-mall cen-receive"></i> <h5 data-v-01e0533d="">待收货</h5></div></a></li> <li data-v-01e0533d=""><a data-v-01e0533d="" href="/order?newstatus=6" class="list-link" title="待评价"><div data-v-01e0533d="" class="tab-cell"> <i data-v-01e0533d="" class="ico-mall cen-comt"></i> <h5 data-v-01e0533d="">待评价</h5></div></a></li> <li data-v-01e0533d=""><a data-v-01e0533d="" href="/order?newstatus=5" class="list-link" title="退换货"><div data-v-01e0533d="" class="tab-cell"><i data-v-01e0533d="" class="ico-mall cen-change"></i> <h5 data-v-01e0533d="">退换货</h5></div></a></li></ul></section> -->

    <van-cell-group class="infolist" >
        <template v-if="userInfo" >
             <van-cell title="我的收藏" :value="List.length" icon="star-o" is-link :to="{name:'shoucang'}" />
            <van-cell title="我的订单" :value=sum_all() icon="fire-o" :to="{name:'dingdan'}" is-link  />
            <van-cell title="地址管理" :value="PlaceList.length" icon="location-o" is-link   :to="{name:'placeList'}" />
        
         
            <van-cell title="领取中心"  icon="point-gift-o" is-link  />
            <van-cell title="订阅中心" value="219" icon="gem-o" is-link  />
            <van-cell title="我的评价"   icon="more-o" is-link  />
        
            <van-cell title="常见问题"  icon="question-o" is-link  />
            <van-cell title="修改密码"  :to="{name:'changepass'}"  icon="smile-o" is-link  />
        </template>
        <van-cell title="设置"  icon="setting-o" is-link  />
        <van-cell title="清除缓存"  @click="clearCache"   icon="setting-o" is-link  />
    </van-cell-group>

    <div class="mbtn" v-if="userInfo" >
        <van-button class="logoutbtn" @click="logouAction">退出登录</van-button>
    </div>

    <van-overlay :show="show"  >
        <div class="probox">
            <!-- <van-progress class="pro" color="#f50" track-color="#123456" :percentage="cache" stroke-width="18" /> -->
            <van-circle
              v-if="show"
              v-model="cache"
              :stroke-width="60"
              :rate="100"
              :speed="10"
              :text="cache+' %'" 
            />
        </div>
    </van-overlay>
  </div>
</template>

<script>
var timer = null;
export default {
    data(){
      return {
        show:false,
        cache:0,
        List:[],
        cartList:[], 
        PlaceList:[],
         sumAll: [],
      }
    },
    watch:{
      cache(v){
        if(v==100){
          this.show = false;
          this.cache = 0;
          this.$toast("缓存清除完毕!")
        }
      }
    },
    methods:{
     async findLike(){
            let res = await this.$ajax.findLike({
                username:this.userInfo.username
                 
        
            })
            this.List = res;
            console.log(res);
            
        },
         async findcart(){
            let res = await this.$ajax.findcart({
                username:this.userInfo.username,
                check:true
            })
            this.cartList = res;
        },
         sum_all() {
      let sum = 0;
      this.cartList.forEach((v) => {
        if (v.check) {
          sum += v.count * 1;
        }
      });
      return sum;
    },
         async savePlace(){
            let res = await this.$ajax.savePlace({
                username:this.userInfo.username
            })
            this.PlaceList = res;
        },
      clearCache(){
        this.cache = 0;
        this.show = true;
        // timer = setInterval(()=>{
        //     if(this.cache<100){
        //       this.cache+=2;
        //     }else{
        //       clearInterval(timer)
        //       timer = null;
        //       this.show = false;
        //       this.cache = 0;
        //       this.$toast("缓存清除完毕!")
        //     }
        // },2000)
      },
        logouAction(){
            this.$dialog.confirm({
                title: '操作提示',
                message: '你真的要退出登录吗?',
            })
            .then(() => {
                // on confirm
                this.changeUserInfo(null)
            })
            .catch(() => {
                // on cancel
            });
        }
    },
    mounted(){
      this.findLike()
      this.findcart()
      this.savePlace()
    }
}
</script>

<style lang="scss" scoped>
.van-overlay{
  z-index:1001;
  .probox{
    width:100%;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:20px;
    ::v-deep .van-circle__text{
      color:#fff !important;
      font-weight: bold;
      }
    .pro{
      position: relative;
    }
  }
}


.mine {
    width: 100%;
    background: #f4f4f4;
    height:100vh;
    overflow: auto;
  &-top {
    text-align: center;
    margin-top: -44px;
    height: 200px;
    padding-left: 22px;
    padding-top: 64px;
    background: url(https://assets.maizuo.com/h5/v5/public/app/img/bg.a5bdd690.png);
    background-size: cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    .avatar-icon {
      width: 63px;
      height: 63px;
      border-radius: 35px;
      margin-right: 20px;
      border: 2px solid #fff;
    }
    .nick-name {
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
    }
  }

  .my-order-tab {
    width: 100%;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    font-size: 13px;
    padding: 0;
    height: 79px;
    background: #fff;
    margin-bottom: 10px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    li{
        flex:1;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        img{
            width:26px;
            height:26px;
        }
        .common-p{
            color: #797d82;
        }
    }
    }

    .mbtn{
        margin:16px;
        margin-bottom: 30px;
        .logoutbtn{
            width:100%;
            margin-bottom: 30px;
        }
    }
}
.cen-order .order-hd[data-v-01e0533d] {
    padding: 0 0.3rem;
    height: 0.8rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;}
    .cen-order .order-hd .order-all[data-v-01e0533d] {
    display: block;
    padding-right: 0.3rem;
    font-size: .24rem;
    color: #999;
    position: relative;
}


.cen-order .order-hd h4[data-v-01e0533d] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: .3rem;
    color: #333;
}
.cen-order .order-list li .list-link[data-v-01e0533d] {
    width: 100%;
    -ms-flex-pack: center;
    -ms-flex: 1;
    flex: 1;
    flex: auto;
    flex-grow: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;}
    .cen-order .order-list li .list-link .tab-cell h5[data-v-01e0533d] {
    color: #333;
    font-size: .22rem;
    line-height: .25rem;
    margin-top: 0.18rem;
}
.cen-order .order-list[data-v-01e0533d] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    flex-direction: row;
    height: 1.6rem;
    background: #fff;
    text-align: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
}
.ico-mall[data-v-01e0533d] {
    background: url(https://js01.daoju.qq.com/zb/v2/ico-mall.png) no-repeat;
    background-size: 7.6rem 10rem;
}
.cen-order .order-list li .list-link .tab-cell .ico-mall[data-v-01e0533d] {
    display: block;
    margin: 0 auto;
}
.cen-order .order-list li .list-link .tab-cell .ico-mall.cen-comt[data-v-01e0533d] {
    width: 0.43rem;
    height: 0.47rem;
    background-position: -1.08rem -0.8rem;
}
.cen-order .order-list li .list-link[data-v-01e0533d] {
    width: 100%;
    -ms-flex-pack: center;
    -ms-flex: 1;
    flex: 1;
    flex: auto;
    flex-grow: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
}
.cen-order .order-list li[data-v-01e0533d], .cen-order .order-list li .list-link[data-v-01e0533d] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-flex: 1;
}

.ico-mall[data-v-01e0533d] {
    background: url(https://js01.daoju.qq.com/zb/v2/ico-mall.png) no-repeat;
    background-size: 7.6rem 10rem;
}
.cen-order .order-list li[data-v-01e0533d] {
    width: 20%;
    height: 100%;
    -ms-flex-pack: center;
    -ms-flex: 1;
    flex: 1;
    flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
}
.cen-order .order-list li .list-link .tab-cell .ico-mall.cen-receive[data-v-01e0533d] {
    width: 0.48rem;
    height: 0.46rem;
    background-position: -1.62rem -0.8rem;
}
.cen-order .order-list li .list-link .tab-cell .ico-mall.cen-pend[data-v-01e0533d] {
    width: 0.46rem;
    height: 0.46rem;
    background-position: -6.32rem -0.24rem;
}


.cen-order .order-list li .list-link .tab-cell .ico-mall.cen-pay[data-v-01e0533d] {
    width: 0.46rem;
    height: 0.45rem;
    background-position: -6.89rem -0.24rem;
}
.cen-order .order-list li .list-link .tab-cell .ico-mall.cen-change[data-v-01e0533d] {
    width: 0.44rem;
    height: 0.44rem;
    background-position: -0.06rem -0.8rem;
}
.cen-order .order-hd .order-all[data-v-01e0533d]:after {
    content: "";
    width: 0.13rem;
    height: 0.22rem;
    background: url(//js01.daoju.qq.com/zb/v2/ico-mall.png) no-repeat;
    background-size: 7.6rem 10rem;
    background-position: -4.62rem -0.24rem;
    position: absolute;
    top: 50%;
    margin-top: -0.1rem;
    right: 0;
    z-index: 2;
}
.top[data-v-5a4c1cff], .top div[data-v-5a4c1cff] {
    display: flex;
    align-items: center;
}
.top[data-v-5a4c1cff] {
    justify-content: space-between;
    padding: 0.266667rem 0.426667rem;
    border-bottom: 0.026667rem solid #eee;
}
.top[data-v-5a4c1cff], .top div[data-v-5a4c1cff] {
    display: flex;
    align-items: center;
}
.top div img[data-v-5a4c1cff] {
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 0.266667rem;
    border-radius: 50%;
}
img {
    display: block;
}
.top div span[data-v-5a4c1cff] {
    font-size: .426667rem;
    color: #333;
}
.van-icon {
    position: relative;
    font: normal normal normal 0.373333rem/1 vant-icon;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
}
.van-icon-arrow:before {
    content: "\e660";
}
.van-icon{
    display: block;
    margin-top: 0.11rem;
}
</style>